<template>
  <div class="app">
    <input type="text" v-model="msg1" />
    <br />
    <!-- 
    // v-model 原理
    // 原理: v-model 本质是一个语法糖.例如应用在输入框上,就是value属性和input事件的合写
    // 作用: 提供数据的双向绑定
    // 1. 数据变,视图跟着变 ":value"
    // 2.视图变,数据跟着变 "@input", $event用于在模板中,获取事件的形参
     -->
    <!-- v-model的底层其实就是：value和 @input的简写 -->
    <input type="text" :value="msg2" @input="msg2 = $event.target.value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
}
</script>

<style>
</style>